<template>
  <div class="waterfall" v-if="lists">
      <waterfall :col="2" :data="lists" :isTransition="false">
        <template>
            <div
                class="pbImgBox"
                v-for="(item,index) in lists"
                :key="index"
                @click="toNoteDeatil(item)"
            >   
                <div  v-if="item.note">
                    <img class="play" 
                    src="../assets/images/play.png" 
                    v-if=" item.activity ? false : item.note.media_type" 
                    width="20"/>
                    <van-image
                        
                        width="100%"
                        class="bigImg"
                        lazy-load
                        :src="item.activity ? item.activity.image : item.note.image_u"
                    />
                    <div class="textOver">{{item.activity ? item.activity.name : item.note.title}}</div>
                    <div class="loveBox">
                        <div class="pic">
                            <img :src="item.activity ? item.activity.author.p : item.note.author.p" width="20">
                            <span class="authorName">{{item.activity ? item.activity.author.n : item.note.author.n}}</span>
                        </div>
                        <div class="like" v-if="item.activity">
                            <img :src="item.activity.action_icon" width="20">
                            <span>{{item.activity.action_title}}</span>
                        </div>
                        <div class="like" v-else>
                            <img src="../assets/images/unlove.png" width="20">
                            <span>{{item.note.favo_count}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </waterfall>
  </div>
</template>

<script>
export default {
    props:["lists"],
    methods:{
        toNoteDeatil(item){
                // console.log(item.note.id);
                this.$router.push({ path: '/noteDeatil', query: { id: item.note.id }});
            },
    }
}
</script>

<style lang="less">
.vue-waterfall{
    padding: 10px 5px 0 5px;
    padding-right: 0;
    font-size: 14px;
    .pbImgBox{
            width: 98%;
            border-radius: 10px;
            position: relative;
            .play{
                position:absolute;
                z-index: 1;
                right: 10px;
                top: 10px;
            }
            .van-image{
                min-height: 100px;
                .van-image__img{
                    border-radius: 10px 10px 0 0;
                }
            }
            .textOver{
                padding: 0 10px;
                margin-top: 10px;
            }
            .loveBox{
                height: 45px;
                // line-height: 45px;
                font-size: 15px;
                color: #8d8a8a;
                padding: 0 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .pic{
                    img{
                        border-radius: 50%;
                    }
                    .authorName{
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                }
                .like,.pic{
                    display: flex;
                    align-items: center;
                    img{
                        vertical-align: middle;
                    }
                    span{
                        margin-left: 5px;
                    }
                }
            }
        }
}
</style>